<template>
  <section class="xh-input-box">
    <el-input
      v-model.trim="url"
      placeholder="请输入长连接地址，例如：https://xxx.xxxx.xxx/"
    ></el-input>
    <el-button type="primary" @click="getLink">CLICK</el-button>
  </section>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

interface Config {
  status: boolean;
  longUrl: string;
  message: string;
}

import validUrl from "valid-url";
// const validUrl: any = require("valid-url");

@Component({})
export default class InputBox extends Vue {
  public url = "";
  public config: Config = {
    status: false,
    longUrl: "",
    message: "",
  };

  getLink(): void {
    this.config.longUrl = "";
    this.config.status = true;
    this.config.message = "";
    // 1. 验证长连接url是否为空 & 是否合法
    if (!this.url && this.config.status) {
      this.config.message = "长连接不能为空！";
      this.config.status = false;
    }
    if (!validUrl.isUri(this.url) && this.config.status) {
      this.config.message = "长连接地址不合法或格式错误！";
      this.config.status = false;
    }
    // 2. 把信息提交给result-box
    this.config.longUrl = this.url;
    this.$bus.$emit("sendLongUrl", this.config);
  }
}
</script>

<style scoped lang="stylus">
.xh-input-box {
  margin: 0 auto;
  display: flex;
  height: 50px;
  width: 800px;
  align-items: center;
}
</style>
